<template>
    <div id="scanPage">
        <div class="schedule-box">
          <div class="schedule-center-box">
            <div class="schedule-center-Topbox">
              <img src="https://wssbsd789.oss-cn-beijing.aliyuncs.com/logo.png" alt=""/>
              <p class="schedule-center-describe">
                <span>智能扫描中</span>
                <span>正在扫描路口防护</span>
              </p>
              <div class="schedule-diagnoseAi-box">
                <p>已接入智能诊断ai算力</p>
              </div>
            </div>
          </div>
          <el-progress define-back-color="#fff"  style="margin:1.25rem"
          :stroke-width="20"   :percentage="num"></el-progress>
        </div>
        <el-row style="padding:2.5rem;">

            <el-col :span="24" style="padding:2rem;background-color: #fff;" >
                <el-collapse v-model="activeName" accordion >
                    <el-collapse-item v-for="(item,index) in datalist"  :title="item.tile" :name="index"   >
                        <img style="width:3rem;height:3rem" src="../assets/loding.webp" alt="">
                        <el-row v-for="items in item.child" style="margin-left:20px" >
                            <el-col :span="22" style="color: rgb(215, 211, 211);">{{items.name}}</el-col>
                            <el-col :span="2" :style="{color:items.status=='待加载'?'red':'blue'}">{{items.status}}
                            </el-col>
                        </el-row>
                    </el-collapse-item>

                </el-collapse>
            </el-col>
        </el-row>
      </div>
    <!-- <div style="height:100%;width:100%">
        <div style="">
            <el-row style="padding:20px;background-color: rgba(236, 239, 239, 0.575);">
                <el-col :span="4" style="text-align: right;padding-right:20px;">
                    <img class="lodi" src="../assets/index1.png" alt="">
                </el-col>
                <el-col :span="16">
                    <div style="font-size: 1.25rem;">智能扫描中...</div>
                    <el-row style="line-height: 3rem;">
                        <el-col :span="1"><img style="width:3rem;height:3rem" src="../assets/loding.webp" alt="">
                        </el-col>
                        <el-col :span="12">
                            <div style="font-size:.6rem;">正在扫描: <span class="ct"> {{next_content}}</span> </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" style="padding:1.25rem;">
                    <el-progress define-back-color="#fff" :text-inside="false" style="margin-bottom:1.25rem"
                        :stroke-width="20"  :percentage="num"></el-progress>
                </el-col>
            </el-row>
            <el-row style="padding:2.5rem;">

                <el-col :span="24" style="padding:2rem;background-color: #fff;" >
                    <el-collapse v-model="activeName" accordion >
                        <el-collapse-item v-for="(item,index) in datalist"  :title="item.tile" :name="index"   >
                            <img style="width:3rem;height:3rem" src="../assets/loding.webp" alt="">
                            <el-row v-for="items in item.child" style="margin-left:20px" >
                                <el-col :span="22" style="color: rgb(215, 211, 211);">{{items.name}}</el-col>
                                <el-col :span="2" :style="{color:items.status=='待加载'?'red':'blue'}">{{items.status}}
                                </el-col>
                            </el-row>
                        </el-collapse-item>

                    </el-collapse>
                </el-col>
            </el-row>


            <div class="bzys" v-for="(item,index) in contentList">
                努力加载中,请稍等。。。
            </div>
        </div>

    </div> -->
</template>
<script>

    export default {
        components: {

        },
        data() {
            return {
                num: 0,
                contentList: [],
                timer: '',
                next_content: '',
                i:0,
                z:0,
                activeName: [0],
                datalist: [
                    {
                        tile: '运营',
                        child: [{
                            name: '成交金额',
                            status: '待加载'
                        },
                        {
                            name: '成交订单数',
                            status: '待加载'
                        },
                        {
                            name: '商品曝光人数',
                            status: '待加载'
                        },
                        {
                            name: '商品点击支付率',
                            status: '待加载'
                        },
                        {
                            name: '直播',
                            status: '待加载'
                        },
                        {
                            name: '短视频',
                            status: '待加载'
                        },
                        {
                            name: '商品卡',
                            status: '待加载'
                        },
                        {
                            name: '图文',
                            status: '待加载'
                        },
                        {
                            name: '图表',
                            status: '待加载'
                        },]
                    },
                    {
                        tile: '评价',
                        child: [{
                            name: '差评数',
                            status: '待加载'
                        },
                        {
                            name: '中评数',
                            status: '待加载'
                        },
                        {
                            name: '近30天差评率',
                            status: '待加载'
                        },
                        {
                            name: '带图评价',
                            status: '待加载'
                        },
                        {
                            name: '图表',
                            status: '待加载'
                        },
                        ]
                    },
                    {
                        tile: '售后工作台',
                        child: [{
                            name: '仲裁待处理',
                            status: '待加载'
                        },
                        {
                            name: '换货待商家收货/发货',
                            status: '待加载'
                        },
                        {
                            name: '已发货退款',
                            status: '待加载'
                        },
                        {
                            name: '退货待处理',
                            status: '待加载'
                        },
                        {
                            name: '退货待商家收货',
                            status: '待加载'
                        },
                        ]
                    },
                ]
            };
        },
        mounted: function () {


        },
        destroyed:function(){
            clearInterval(this.timer)
        },
        methods: {
            getNum(i) {
                var that=this
                
                // this.contentList.push(1)
                if(this.i<that.datalist.length ){
                    this.num = this.num + Math.floor((Math.random() * (1)) + 4)
                    that.activeName=[that.i]
                    if(that.z<that.datalist[that.i].child.length){
                        that.datalist[this.i].child[this.z].status = '加载成功'
                        that.next_content=that.datalist[this.i].child[this.z].name
                        that.z=that.z+1
                    }else{
                        that.i=that.i+1
                        that.z=0
                    }
                }else{
                    this.num = 100
                    clearInterval(this.timer)
                    this.$parent.getType(false)
                    // this.$router.push({ path: '/index' })
                }
               
                // if (this.num >= 100) {
                //     this.num = 100
                //     clearInterval(this.timer)
                //     this.$router.push({ path: '/index' })
                // }

              
            },

        },
        created: function () {
            var that = this
            this.timer=    setInterval(this.getNum,200)
            
        }
    }
</script>
<style lang="less">
  .schedule-box{
    .el-progress-bar{
    width: 95%;
}
  } 
    * {
  padding: 0;
  margin: 0;
}

#scanPage {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(to right, #7f9ae3d3, #ebe2f0);
height: 100vh;
  .schedule-box {
    width: 100%;
    background: #f9f9f9;
    position: relative;

    .schedule-center-box {
      width: 100%;
      height: 120px;

      .schedule-center-Topbox {
        width: 89.167%;
        margin: 0 auto;
        height: 215px;

        img {
          width: 150px;
          height: 50px;
          margin-top: 34px;
          margin-right: 30px;
          float: left;
        }

        .schedule-center-describe {
          float: left;

          span {
            display: block;

            &:nth-of-type(1) {
              font-size: 28px;
              margin-top: 30px;
            }

            &:nth-of-type(2) {
              font-size: 20px;
              margin-top: 13px;
              color: #a19d9c;
            }
          }
        }

        .schedule-diagnoseAi-box {
          float: left;
          height: 35px;
          width: 360px;
          background: #e1f7e9;
          margin-top: 30px;
          margin-left: 30px;
          border: #7adc94 solid 2px;
          border-radius: 5px;
          position: relative;
          text-align: center;

          > p {
            font-size: 22px;
            line-height: 33px;
            color: #f76429;
          }

          &::before {
            content: "";
            position: absolute;
            top: 12px;
            left: -6px;
            width: 10px;
            height: 10px;
            border-top: 2px solid #7adc94;
            border-left: 2px solid #7adc94;
            background: #e1f7e9;
            transform: rotate(-45deg);
          }
        }
      }
    }

    .progresstab {
      position: absolute;
      bottom: -16px;
      left: -2px;
      width: 100%;
      height: 15px;
    }
  }

  .list-box {
    width: 100%;
    margin-top: 2px;
    ul {
      list-style: none;
      position: relative;
      .Aspin {
        position: absolute;
        top: 26px;
        left: 6.93%
      ;
      }
      .categorydata {
        width: 100%;

        .categorydata_titleAuto {
          width: 88.02%;
          margin: 0 auto;
          display: flex;
          border-bottom: 3px solid #f9f9f9;
          box-sizing: border-box;

          .categorydata_titleAuto_title {
            line-height: 75px;
            flex: 1;
            font-weight: 600;
            font-size: 20px;
            margin-left: 3.125%;
            .contentLength {
              font-size: 14px;
              font-weight: 600;
              margin-left: 10px;
              color: #999;
            }
          }

          .arrow {
            width: 2.604%;
            text-align: center;

            .arrow_direction {
              width: 24%;
              height: 12px;
              margin-top: 37px;
              display: inline-block;
              border-left: #1cd376 1px solid;
              border-top: #1cd376 1px solid;
              transform: rotate(45deg);
            }
          }

        }

        .categorydata_content {
          background: #ffffff;

          .categorydata_content_Auto {
            margin: 0 auto;
            width: 88.02%;
            padding: 0 3.125%;
            overflow: hidden;
            transition: height 3s ease;

            ol {
              list-style: none;
              width: 100%;

              .contentlist {
                margin: 20px 0;
                display: flex;
                color: #959393;

                .content {
                  flex: 1;
                  margin-left: 50px;
                }
              }
            }
          }
        }

        &:nth-of-type(1) {
          background: #f9f9f9;
        }
      }
    }
  }
}
.ct{
        font-size: .9375rem;
        color: #0089ff;
    }
    /* .ct{
        font-size: .9375rem;
        color: #0089ff;
    }
    .lodi {
        width: 12rem;
        height: 8rem;
    }

    .body {

        background-size: 100vw 100vh;
    }

    .bzys {
        font-size: 1.23rem;
        color: #7373d3;
        line-height: 2.5rem;
        font-weight: bold;
        border: solid 1px #0089ff;
        padding: 0.625rem;
        margin: 0.3125rem 0;
        border-radius: 0.5625rem;

    }


    .nbjs {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }


    body,
    html {
        height: 100%;
    }


    img {
        z-index: -1;
    } */
</style>